<template>
    <div class="page coach-page family-teenagers">
        <div class="banner">
            <div class="banner-image" style="background-image: url('/images/training_detail_banner.jpg')">
                <span>小将之家</span>
                <p>COACH TRAINING</p>
            </div>
        </div>
        <div class="content">
            <div class="navbar">
                <a :class="{active:type==0}" @click="switchtitle(0)" class="cur">最新</a>
                <a :class="{active:type==1}" @click="switchtitle(1)" class="cur">热门</a>
                <div class="navigation-information" v-if="userStatus">
                    <router-link class="my-post" to="/myPost"><img src="/images/my-post.png"/>我的帖子</router-link>
                    <el-badge v-if="sum!=0" :value="sum" class="item elbadges">
                        <router-link class="my-tidings" to="/post"><img src="/images/my-tidings.png"/>消息</router-link>
                    </el-badge>
                    <div v-else class="item elbadges disfc">
                        <router-link class="my-tidings" to="/post"><img src="/images/my-tidings.png"/>消息
                        </router-link>
                    </div>
                    <router-link class="posting-button" to="/familyTeenagersEdit">发帖</router-link>
                    <span class="cur" @click="Refresh">刷新</span>
                </div>
                <div class="navigation-information" v-else>
                    <span class="cur" @click="Refresh">刷新</span>
                </div>
            </div>
            <div class="teenager-lists">
                <div class="teenager-item display-flex-row bottom-line" v-for="(item,index) in list" :key="index">
                    <div class="num-wrap">
                        <span>{{item.sum}}</span>
                    </div>
                    <div class="flex1 memo-wrap">
                        <a class="cur" @click="goDetail(item.id)">{{item.title}}</a>
                        <p class="desc" v-html="item.content"></p>
                        <!--                        <img class="image" src="/images/information-1.jpg" alt="">-->
                    </div>
                    <div class="user-wrap"><span>{{item.name}}</span></div>
                    <div class="time-wrap">{{item.updateTime|filtertime}}</div>
                </div>
                <el-pagination
                        background
                        class="pageforum"
                        @current-change="handleCurrentChange"
                        layout="prev, pager, next"
                        :page-size="pageSize"
                        :total="total">
                </el-pagination>
            </div>

        </div>
    </div>
</template>

<script>
    import {getList, unread} from '../../api/api/forum.js';
    import {baseImgPath, basefile} from '@/config/env.js';
    import {mapState, mapActions, mapMutations} from 'vuex'
    import {formatDate} from '@/utils/utils'

    export default {
        data() {
            return {
                active: 0,
                type: 0,
                pageSize: 8,
                pageNum: 1,
                key: '',
                total: 0,
                list: [],
                Traintotal: 0,
                isdelete: false,
                userid: sessionStorage.getItem('userType') ? parseInt(sessionStorage.getItem('userType')) : 0,
                deletedata: {
                    address: "",
                    age: "",
                    count: 0,
                    createTime: '',
                    id: 0,
                    imgs: "",
                    money: 0,
                    name: "",
                    reason: '',
                    status: '',
                    sum: '',
                    time: '',
                    type: 0,
                    showImg: ''
                },
                sum: 0
            };
        },
        created() {
            this.GetList()
            // this.Getunread()
            if (this.userid) {
                this.timer = setInterval(this.Getunread, 5000);
            }
            // setInterval(this.Getunread, 5000);
        },
        computed: {
            ...mapState('Login', [
                'userStatus'
            ]),
        },
        methods: {
            Refresh() {
                this.page = 1
                this.GetList()
            },
            // 分类切换
            switchtitle(e) {
                this.type = e
                this.page = 1
                this.GetList()
            },
            handleSizeChange(val) {
                this.pageSize = val
                this.GetList()
            },
            handleCurrentChange(val) {
                this.pageNum = val
                this.GetList()
            },
            goDetail(e) {
                clearInterval(this.timer);
                var that = this;
                that.$router.push({
                    path: 'familyTeenagersDetail',
                    query: {
                        id: e
                    }
                })
            },
            goEdit(e) {
                clearInterval(this.timer);
                var that = this;
                that.$router.push({
                    path: '/platform/news/edit',
                    query: {
                        id: e
                    }
                })
            },
            goAdd() {
                clearInterval(this.timer);
                var that = this;
                that.$router.push({
                    path: '/platform/news/edit',
                })
            },
            GetList() {
                getList({
                    "pageNum": this.pageNum,
                    "pageSize": this.pageSize,
                    "type": this.type,
                }).then(res => {
                    this.list = res.data.list
                    this.total = res.data.total
                });
            },
            Getunread() {
                unread().then(res => {
                    console.log(res);
                    if (res) {
                        this.sum = res.data.sum
                    } else {
                        clearInterval(this.timer)
                    }

                });
            },
        },
        filters: {
            filtersImg: function (img) {
                return basefile + img
            },
            filtertime: function (data) {
                if (data) {
                    return formatDate(data, 'Y-M-D H:I:S')
                }
                return ''
            }
        }
    }
</script>

<style scoped>

    @import url("css/D-coach-training.css");

    .cur {
        cursor: pointer;
    }

    .pageforum {
        text-align: right;
        margin-top: 20px;
    }

    .elbadges {
        top: 11px;
    }

    .navigation-information {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        height: 38px;
    }

    .disfc {

    }

    .disfc a {

        display: flex;
        justify-content: center;
        align-items: center;

    }
</style>
